<template>
  <div class="MButton" :class="[type,size,color]">
    <span>
    </span>
    <slot></slot>
  </div>
</template>

<style lang="less" scoped>
    @import "~core/basic.less";

    .MButton {
      display: inline-block;
      padding: @gird 2*@gird;
      border-width: 1px;
      border-style: solid;
      cursor: pointer;
      margin: @gird/2;

      transition: all 200ms @ease-strong;
      .noselect();
    }

    .normal {
      background: @white !important;
    }

    .normal:hover {
      color: @white;
    }

    .pirmary {
      color: @white !important;
    }

    [disabled] {
      background: @gray-shallow !important;
      color: @gray-dark !important;
      border:@gray-shallow 1px solid !important;
    }

    div[disabled]:hover {
      background: @gray-shallow !important;
      color: @gray-dark !important;
      cursor: not-allowed;
    }

    .main {
      color: @color;
      background: @color;
      border-color: @color;
    }

    .main:hover {
      background: @color-shallow !important;
    }

    .main:active {
      background: @color-deep !important;
    }

    .sub {
      color: @subcolor;
      background: @subcolor;
      border-color: @subcolor;
    }

    .sub:hover {
      background: @subcolor-shallow !important;
    }

    .sub:active {
      background: @subcolor-deep !important;
    }

    .danger {
      color: @danger;
      background: @danger;
      border-color: @danger;
    }

    .danger:hover {
      background: @danger-shallow !important;
    }

    .danger:active {
      background: @danger-deep !important;
    }

    .big {
      padding: 2*@gird !important;
    }

    .full {
      width: 100%;
    }
</style>

<script>
  export default {
    props: {
      color: {
        default: "main",
        validator(val) {
          return (val == "main" || val == "sub" || val == "danger");          
        }
      },
      type: {
        default:"normal",
        validator(val) {
          return (val == "normal" || val == "pirmary" || val == "disable");          
        }
      },
      size:{
        default:"small",
        validator(val) {
          return (val == "small" || val == "big" || val == "full");          
        }
      }
    }
  }
</script>